import * as React from 'react';
import classNames from 'classnames';
import { Icon } from 'ygbh'

export interface TagProps {
	children?: React.ReactNode;
	className?: string;
	closable?: boolean;
	
	
	closeIcon?: React.ReactNode;
	icon?: React.ReactNode;

	color?: string;
	style?: React.CSSProperties;
	
	onClose?: (e: React.MouseEvent<HTMLElement>) => void;
}

const Tag: React.FC<TagProps> = props => {
	const prefixCls = 'bh-tag';
	const {
		children,
		className,
		closable = false,
		
		closeIcon,
		icon,

		color,
		style,
		onClose,
		...restProps
	} = props;
	const classString = classNames(
		prefixCls, 
		className,
		{
			[`${prefixCls}-has-color`]: color,
		}
	);
	const tagStyle = {
		backgroundColor: color,
		...style,
	};
	const handleCloseClick = (e:any) => {
	    e.stopPropagation();
	    onClose && onClose(e);
	}
	const iconNode = icon || null;
	const kids = iconNode ? (
		<>
			{iconNode}
			<span className='has-icon-node'>{children}</span>
		</>
	) : (
	    children
	);
	//渲染关闭按钮
	const renderCloseIcon = () => {
		if(closable) {
			return closeIcon ? (<span className={`${prefixCls}-close-icon`} onClick={handleCloseClick}>{closeIcon}</span>) 
			: (<span className={`${prefixCls}-close-icon`} onClick={handleCloseClick}><Icon name='close'></Icon></span>);
		}
		return null;
	};

	return (
		<div {...restProps} className={classString} style={tagStyle}>
		    {kids}
		    {renderCloseIcon()}
		</div>
	)
};

export default Tag;